<template>
  <a-layout>
    <a-layout-sider width="200px" class="department-tree">
      <a-tree :tree-data="departmentTreeData" />
    </a-layout-sider>
    <a-layout-content>
      <a-form layout="inline" @submit.prevent="handleSearch" class="search-form">
        <a-form-item label="名称">
          <a-input v-model:value="filters.name" placeholder="名称" />
        </a-form-item>
        <a-form-item label="创建人">
          <a-input v-model:value="filters.creator" placeholder="创建人" />
        </a-form-item>
        <a-form-item label="创建时间">
          <a-date-picker v-model:value="filters.createTime" placeholder="创建时间" />
        </a-form-item>
        <a-form-item label="当前状态">
          <a-select v-model:value="filters.status" placeholder="当前状态">
            <a-select-option value="enabled">已启用</a-select-option>
            <a-select-option value="disabled">未启用</a-select-option>
          </a-select>
        </a-form-item>
        <a-form-item>
          <a-button type="primary" html-type="submit">查询</a-button>
          <a-button @click="resetFilters">重置</a-button>
        </a-form-item>
      </a-form>
      <div class="buttons">
        <a-button @click="showModal('add')">新增</a-button>
        <a-button type="danger">删除</a-button>
      </div>
      <a-table :columns="columns" :data-source="filteredData" row-key="id">
        <template #operations="{ record }">
          <a-button @click="showModal('detail', record)">详情</a-button>
        </template>
      </a-table>
    </a-layout-content>
  </a-layout>

  <a-modal v-model:visible="modal.visible" :title="modal.title" @ok="handleModalOk">
    <a-form v-if="modal.type === 'add'" model="modal.formData" ref="modalForm">
      <a-form-item label="名称">
        <a-input v-model:value="modal.formData.name" />
      </a-form-item>
      <a-form-item label="创建人">
        <a-input v-model:value="modal.formData.creator" />
      </a-form-item>
      <a-form-item label="创建时间">
        <a-date-picker v-model:value="modal.formData.createTime" />
      </a-form-item>
      <a-form-item label="当前状态">
        <a-select v-model:value="modal.formData.status">
          <a-select-option value="enabled">已启用</a-select-option>
          <a-select-option value="disabled">未启用</a-select-option>
        </a-select>
      </a-form-item>
    </a-form>
    <div v-else>
      <p>名称: {{ modal.detailData.name }}</p>
      <p>创建人: {{ modal.detailData.creator }}</p>
      <p>创建时间: {{ modal.detailData.createTime }}</p>
      <p>当前状态: {{ modal.detailData.status }}</p>
    </div>
  </a-modal>
</template>

<script setup>
import { ref, reactive, computed } from 'vue'
import { Modal, Layout, Tree, Form, Input, DatePicker, Select, Button, Table } from 'ant-design-vue'

const { Sider, Content } = Layout
const { Option } = Select

const departmentTreeData = [
  { title: '部门1', key: '1', children: [{ title: '子部门1', key: '1-1' }] },
  { title: '部门2', key: '2', children: [{ title: '子部门2', key: '2-1' }] },
  { title: '部门3', key: '3', children: [{ title: '子部门3', key: '3-1' }] },
]

const tableData = ref([
  { id: 1, name: '项目1', creator: '张三', createTime: '2022-01-01', status: 'enabled' },
  { id: 2, name: '项目2', creator: '李四', createTime: '2022-02-01', status: 'disabled' },
  { id: 3, name: '项目3', creator: '王五', createTime: '2022-03-01', status: 'enabled' },
  { id: 4, name: '项目4', creator: '赵六', createTime: '2022-04-01', status: 'disabled' },
  { id: 5, name: '项目5', creator: '孙七', createTime: '2022-05-01', status: 'enabled' },
])

const filters = reactive({
  name: '',
  creator: '',
  createTime: null,
  status: null,
})

const columns = [
  { title: '名称', dataIndex: 'name' },
  { title: '创建人', dataIndex: 'creator' },
  { title: '创建时间', dataIndex: 'createTime' },
  { title: '当前状态', dataIndex: 'status' },
  {
    title: '操作',
    key: 'operations',
    slots: { customRender: 'operations' },
  },
]

const filteredData = computed(() => {
  return tableData.value.filter((data) => {
    return (
      (!filters.name || data.name.includes(filters.name)) &&
      (!filters.creator || data.creator.includes(filters.creator)) &&
      (!filters.createTime || data.createTime === filters.createTime) &&
      (!filters.status || data.status === filters.status)
    )
  })
})

const modal = reactive({
  visible: false,
  title: '',
  type: '',
  formData: {
    name: '',
    creator: '',
    createTime: null,
    status: '',
  },
  detailData: {},
})

function handleSearch() {
  // Implement search logic here
}

function resetFilters() {
  filters.name = ''
  filters.creator = ''
  filters.createTime = null
  filters.status = null
}

function showModal(type, record = {}) {
  modal.type = type
  modal.visible = true
  if (type === 'add') {
    modal.title = '新增数据'
    modal.formData = {
      name: '',
      creator: '',
      createTime: null,
      status: '',
    }
  } else if (type === 'detail') {
    modal.title = '详情'
    modal.detailData = record
  }
}

// function handleModalOk() {
//   if (modal.type === 'add') {
//     tableData.value.push({ ...modal.formData, id: Date.now() })
//   }
//   modal.visible = false
// }
function handleModalOk() {
  if (modal.type === 'add') {
    tableData.value.push({
      ...modal.formData,
      id: Date.now(),
      createTime: new Date().toISOString().split('T')[0] // 添加这一行
    })
  }
  modal.visible = false
}
</script>

<style scoped>
.department-tree {
  background-color: #fff;
}
.search-form {
  display: flex;
  justify-content: space-between;
  margin-bottom: 20px;
}
.buttons {
  text-align: right;
  margin-bottom: 20px;
}
</style>
